<template>
    <div>
        <swiper class="swiper">
            <swiper-item v-for="(i , idx) in imgList" :key="idx">
                <image class="banner_img" :src="i" mode="aspectFill" />
            </swiper-item>
        </swiper>
        <div class="title">{{detail.title}}</div>
        <div class="content" v-html="content"></div>

        <div class="btns">
            <div class="share" @click="shareTo">发布到小红书</div>
            <div class="create" @click="getDetail">重新生成一篇</div>
        </div>

        <div class="out_wx_img" v-if="outwxImgShow" @click="outwxImgShow = false">
            <image src="https://ed-1306681707.cos.ap-nanjing.myqcloud.com/ecardu/img/20241021160203355.png" mode="" />
        </div>
    </div>
</template>

<script>
import { getContentByCodeId, codeShareContentSuccess, getXhsSign } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            codeId: '',
            detail: {},
            content: '',
            imgList: [],
            signInfo: {},
            outwxImgShow: false
            
        }
    },
    async onLoad({ codeId }) {
        this.codeId = codeId
        this.getDetail()
        // this.xhsConfig()
    },
    methods: {
        async xhsConfig() {
            return getXhsSign({ codeId: this.codeId }).then(res => {
                this.signInfo = res.data
            })
        },
        getDetail() {
            getContentByCodeId({
                codeId: this.codeId
            }).then(res => {
                this.detail = res.data
                let coverImg = res.data.coverImg ? [res.data.coverImg] : []
                let imgs = res.data.imgs && res.data.imgs.length ? res.data.imgs.map(i => i.imgUrl) : []
                this.imgList = [
                    ...coverImg,
                    ...imgs
                ]
                let contentArr = res.data.content
                let content = ''
                contentArr = contentArr.split('\n')
                contentArr.forEach(item => {
                    if(item) {
                        content += `<p style="margin-bottom: 8px">${item}</p>`
                    }
                })
                this.content = content
                // console.log(content);
            })

        },
        async shareTo() {
            if(navigator.userAgent.toLocaleLowerCase().indexOf('micromessenger') > -1) {
                return this.outwxImgShow = true
            }
            await this.xhsConfig()
            let signInfo = this.signInfo

            xhs.share({
                shareInfo: {
                    type: 'normal', // 必填，笔记类型 'video' | 'normal'
                    title: this.detail.title, // 笔记标题
                    content: this.detail.content, // 笔记正文
                    images:  this.detail.imgs.map(i => i.imgUrl), //图文类型必填，笔记图片，必须是服务器地址，暂时不支持本地文件
                    video: '', // 视频类型必填，必须是服务器地址
                    cover: this.detail.coverImg // 视频封面图，必须是服务器地址，暂时不支持本地文件
                },
                verifyConfig: {
                    appKey: signInfo.app_key, //必填，应用的唯一标识,
                    nonce: signInfo.nonce, // 必填，服务端生成签名的随机字符串
                    timestamp: signInfo.timestamp, // 必填，服务端生成签名的时间戳
                    signature: signInfo.signature, // 必填，服务端生成的签名
                },
                fail: (e) => {
                    // 调用失败时执行的回调函数
                    this.$interact.toast('调用失败')
                }
            })

            codeShareContentSuccess({
                contentId: this.detail.otherInfo.contenId
            })
        }
    }
}
</script>
<style lang="less" scoped>
.banner_img{
    width: 100%;
    height: 100%;
}
swiper{
    height: 900rpx;
    swiper-item{
        height: 900rpx;
    }
}
.title{
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
}
.content{
    padding: 30rpx 30rpx 100rpx;
}

.btns{
    position: fixed;
    width: 100%;
    bottom: 50rpx;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    >div{
        width: 500rpx;
        height: 70rpx;
        border-radius: 35rpx;
        background: orange;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
        .gradient(#ef4705, #f1a223);
        &:last-child{
            .gradient(#fd8d61, #f3ca87);
        }
    }
}
.out_wx_img{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    image{
        width: 100%;
        height: 100%;
    }
}
</style>